<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-07-24
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-07-24
 * @FilePath: /element-admin/src/views/MemberInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="MemberInfo-page" class="both-center">
    <!-- bodyer -->
    <div class="drawer-bodyer">
      <el-row class="row fstRow clearfix">
        <el-button plain size="small" @click="handleClose()">关闭</el-button>
        <el-button plain size="small" type="primary" @click="handleInit">初始化数据</el-button>
        <el-button plain ize="small" type="info" @click="handleRefesh">刷新</el-button>
        <el-button plain size="small" type="success" @click="handleSave">保存</el-button>
        <el-button plain size="small" type="danger" @click="handleDel">删除</el-button>
      </el-row>
      <el-divider content-position="left">项目信息</el-divider>
      <el-row class="row fstRow clearfix">
        <!-- 上侧项目内容栏-->
        <el-col :span="24" style="height: auto;">
          <!--分类栏内容介绍行-->
          <div class="col-sm-12" style="width: 1080px">
            <el-descriptions :column="4" border class="margin-top" size="small" title="会员信息一览">
              <el-descriptions-item :span="4">
                <template slot="label"><i class="el-icon-user"></i> 帐号状态</template>
                <el-tag v-if="Member.status=='MEM-001'" type="success">已开通</el-tag>
                <el-tag v-if="Member.status=='MEM-002'" type="warning">已停用</el-tag>
                <el-tag v-if="Member.status=='MEM-009'" type="info">已删除</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template slot="label"><i class="el-icon-mobile-phone"></i> 最后登录时间</template>
                {{ Member.last_logintime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-mobile-phone"></i> 首次登陆时间</template>
                {{ Member.first_logintime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-mobile-phone"></i> 退出时间</template>
                {{ Member.end_time }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i> 累积积分</template>
                {{ Member.acct_point }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i> 已使用积分</template>
                {{ Member.used_point }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i> 有效积分</template>
                {{ Member.effect_point }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i> 已失效积分</template>
                {{ Member.invalid_point }}
              </el-descriptions-item>
              <el-descriptions-item :span="1">
                <template slot="label"><i class="el-icon-user"></i> 当前等级</template>
                {{ Member.level }}
              </el-descriptions-item>
              <el-descriptions-item :span="1">
                <template slot="label"><i class="el-icon-user"></i> 等级名称</template>
                {{ Member.level_name }}
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template slot="label"><i class="el-icon-user"></i> 最新升级时间</template>
                {{ Member.upgrade_time }}<span style="margin-left: 15px">(tips:会员等级发生变化的时间)</span>
              </el-descriptions-item>
              <el-descriptions-item :span="1">
                <template slot="label"><i class="el-icon-user"></i> 到期日</template>
                {{ Member.exp_time }}
              </el-descriptions-item>
              <el-descriptions-item :span="1">
                <template slot="label"><i class="el-icon-user"></i> 签约支付合同</template>
                {{ Member.contract_no }}
              </el-descriptions-item>
            </el-descriptions>
            <el-form :label-width="labelWidth" :model="Member" label-position="right">
              <el-tabs v-model="tabActiveName" type="border-card" style="margin-top: 10px">
                <el-tab-pane label="会员基础信息" name="fst">
                  <el-col :span="22" :offset="0">
                    <el-row>
                      <el-form-item label="自动生成-会员id">
                        <el-input v-model="Member.member_id" readonly></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="姓名">
                          <el-input v-model="Member.name" maxlength="100"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="性别">
                          <el-select v-model="Member.sex" placeholder="性别" size="small">
                            <el-option label="请选择性别" value=-1></el-option>
                            <el-option v-for="item in sex_options" v-bind:key="item.value" :data="item"
                                       :label="item.label" :value=item.value></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="生日">
                          <el-date-picker
                              v-model="Member.birthday" placeholder="选择日期" type="date" value-format="yyyy-MM-dd">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="移动电话">
                          <el-input v-model="Member.mobile" maxlength="100"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="电子邮箱">
                          <el-input v-model="Member.email" maxlength="100"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="wechat">
                          <el-input v-model="Member.wechat" maxlength="100"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="mp">
                          <el-input v-model="Member.mp" maxlength="100"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="msn">
                          <el-input v-model="Member.msn" maxlength="100"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="5">
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="会员头像图片">
                          <el-input v-model="Member.head_port" maxlength="100"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <!-- 关联扩展信息 ------------------------------------------------------------------------------------------------------------->
                <el-tab-pane label="帐号信息" name="snd">
                  <el-col :span="22" :offset="0">
                    <el-row>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="帐号注册类型：">
                          <el-tooltip class="item" content="MEM-001 系统内注册" effect="dark" placement="right">
                            <el-input v-model="Member.member_type" readonly></el-input>
                          </el-tooltip>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="用户账号">
                          <el-input v-model="Member.uname" maxlength="40"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="密码">
                          <el-input v-model="Member.password" maxlength="20" show-password></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="帐号签约方式">
                          <el-tooltip class="item" content="1000签约会员 / 1100未签约 / 1109签约取消" effect="dark"
                                      placement="right">
                            <el-select v-model="Member.account_type" placeholder="账户类型" size="small">
                              <el-option label="请选择账户签约进程" value=-1></el-option>
                              <el-option v-for="item in account_type_options" v-bind:key="item.value" :data="item"
                                         :label="item.label"
                                         :value=item.value></el-option>
                            </el-select>
                          </el-tooltip>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="签约支付合同号">
                          <el-input v-model="Member.contract_no" maxlength="20" :clearable="true"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="会员到期日限">
                          <el-date-picker v-model="Member.exp_time" placeholder="选择日期" type="date"
                                          value-format="yyyy-MM-dd">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="会员功能模块">
                          <el-tooltip class="item" content=" EXCE会员/ HCM会员" effect="dark" placement="right">
                            <el-select v-model="Member.register_type" placeholder="注册用途" size="small">
                              <el-option label="请选择注册用途" value=-1></el-option>
                              <el-option v-for="item in register_type_options" v-bind:key="item.value" :data="item"
                                         :label="item.label"
                                         :value=item.value></el-option>
                            </el-select>
                          </el-tooltip>
                        </el-form-item>
                      </el-col>
                      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                        <el-form-item label="帐号状态：">
                          <el-tooltip class="item" content="MEM-001 正常 / MEM-002 停用 / MEM-003 激活 /MEM-009 删除"
                                      effect="dark" placement="right">
                            <el-select v-model="Member.status" placeholder="帐号状态" size="small">
                              <el-option label="请选择帐号状态" value=-1></el-option>
                              <el-option v-for="item in status_options" v-bind:key="item.value" :data="item"
                                         :label="item.label"
                                         :value=item.value></el-option>
                            </el-select>
                          </el-tooltip>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="5">
                      <el-col :lg="20" :md="20" :sm="20" :xl="20" :xs="20">
                        <el-form-item label="会员说明">
                          <el-input type="textarea" rows="8" v-model="Member.status_reson" maxlength="20"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-form-item label="是否新用户">
                        <el-switch v-model="Member.new_user"/>
                        <span style="margin-left: 15px">(tips:是否新用户)</span>
                      </el-form-item>
                      <el-form-item label="是否代理商">
                        <el-switch v-model="Member.is_agent"/>
                        <span style="margin-left: 15px">(tips:是否代理商)</span>
                      </el-form-item>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <!-- 会员信息 ------------------------------------------------------------------------------------------------------------->
                <el-tab-pane label="会员等级权益" name="trd">
                  <el-col :span="22" :offset="0">
                    <el-row :gutter="5">
                      <el-form-item label="会员等级">
                        {{ Member.level }}
                      </el-form-item>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <!-- 关联地址信息 ------------------------------------------------------------------------------------------------------------->
                <el-tab-pane label="地址信息" name="forth" lazy>
                  <MemberAddressDrawer ref="memberAddressRef" :drawId="member_id" ></MemberAddressDrawer>
                </el-tab-pane>
              </el-tabs>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {add, drop, fetchOne, update} from "@/api/Member";
import {Loading, Message} from 'element-ui';
import {codeToText, regionData} from 'element-china-area-data'
import MemberAddressDrawer from '@/views/members/memberAddressDrawer/MemberAddressDrawer.vue'

export default {
  name: "MemberInfo",
  components: {MemberAddressDrawer},
  data() {
    return {
      initFlg: true,
      tabActiveName: "fst",
      loadingInstance: null,
      labelWidth: "140px",
      member_id: '',
      options: regionData,
      selectedOptions: [],
      sex_options: [
        {label: "男", value: "0", key: 0},
        {label: "女", value: "1", key: 1},
      ],
      status_options: [
        {label: "正常", value: "MEM-001", key: 1},
        {label: "停用", value: "MEM-002", key: 2},
        {label: "激活", value: "MEM-003", key: 3},
        {label: "删除", value: "MEM-009", key: 4},
      ],
      account_type_options: [
        {label: "签约会员", value: "1000", key: 1000},
        {label: "未签约", value: "1100", key: 1100},
        {label: "签约取消", value: "1109", key: 1109},
      ],
      register_type_options: [
        {label: "EXCE会员", value: "0", key: 0},
        {label: "HCM会员", value: "1", key: 1},
      ],
      new_user_options: [
        {label: "否", value: "0", key: 0},
        {label: "是", value: "1", key: 1},
      ],
      Member: {
        member_id: ""
        , member_code: ""
        , name: ""
        , uname: ""
        , password: ""
        , sex: ""
        , birthday: ""
        , mobile: ""
        , mp: ""
        , wechat: ""
        , msn: ""
        , is_agent: ""
        , provice: ""
        , city: ""
        , region: ""
        , provice_code: ""
        , city_code: ""
        , region_code: ""
        , register_type: ""
        , login_count: 0
        , reg_ip: "0.0.0.0"
        , remark: ""
        , member_type: "MEM-001"
        , head_port: ""
        , status: "MEM-001"
        , status_reson: "系统添加"
        , end_time: ""
        , email: ""
        , first_logintime: ""
        , last_logintime: ""
        , exp_time: ""
        , create_date: ""
        , create_user: ""
        , update_date: ""
        , update_user: ""
        , register_time: ""
        , upgrade_type: ""
        , upgrade_time: ""
        , upgrade_flag: ""
        , account_type: ""
        , contract_no: ""
        , new_user: ""
        , level: ""
        , level_name: ""
        , grow_value: 0
        , acct_point: 0
        , used_point: 0
        , effect_point: 0
        , invalid_point: 0
      },
    }
  },
  props: {
    drawId: {type: String, default: ''}
  },
  computed: {},
  methods: {
    handleInit() {
      this.initFlg = true;
      this.tabActiveName = "fst";
      this.Member = this.initMembner()
    },
    initMembner() {
      return new Object({
        member_id: "",
        member_code: "",
        name: "",
        uname: "",
        password: "",
        sex: "",
        birthday: "",
        mobile: "",
        mp: "",
        wechat: "",
        msn: "",
        is_agent: "",
        provice: "",
        city: "",
        region: "",
        provice_code: "",
        city_code: "",
        region_code: "",
        register_type: "",
        login_count: 0,
        reg_ip: "0.0.0.0",
        remark: "",
        member_type: "MEM-001",
        head_port: "",
        status: "MEM-001",
        status_reson: "系统添加",
        end_time: "",
        email: "",
        first_logintime: "",
        last_logintime: "",
        exp_time: "",
        create_date: "",
        create_user: "",
        update_date: "",
        update_user: "",
        register_time: "",
        upgrade_type: "",
        upgrade_time: "",
        upgrade_flag: "",
        account_type: "",
        contract_no: "",
        new_user: "",
        level: "",
        level_name: "",
        grow_value: 0,
        acct_point: 0,
        used_point: 0,
        effect_point: 0,
        invalid_point: 0
      });
    },
    handleLoad() {
      let param = {"memberId": this.drawId,}
      fetchOne(param).then(res => {
        if (res.code == 200) {
          this.Member = res.data;
          this.Member.member_type = "MEM-001";
        }
      }).catch(err => {
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    handleRefesh() {
      this.handleLoad();
    },
    handleSave() {
      this.Member.member_type = "MEM-001";
      if (this.initFlg) {
        add({data: this.Member}).then((result) => {
          if (result.code == 200) {
            Message({message: "执行成功", type: 'success', duration: 3 * 1000});
            this.$emit('fMethod', true);
          }
        })
      } else {
        update({data: this.Member}).then((result) => {
          if (result.code == 200) {
            Message({message: "执行成功", type: 'success', duration: 3 * 1000});
            this.$emit('fMethod', true);
          }
        })
      }
    },
    handleDel() {
      let param = {"memberId": this.Member.member_id,}
      drop(param).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          Message({message: "执行成功", type: 'success', duration: 3 * 1000});
        }
      }).catch(err => {
        Message({message: err, type: 'error', duration: 3 * 1000})
      });
    },
    handleClose() {
      this.$emit('fMethod');
    },
    // tabHandleClick(tab, event) {
    //   console.log(tab, event);
    //   if (tab == "forth") {
    //     this.$refs.memberAddressRef.handleInit()
    //   }
    // },
    addressChange(arr) {
      this.Member.provice = codeToText[arr[0]];
      this.Member.city = codeToText[arr[1]];
      this.Member.region = codeToText[arr[2]];
      this.Member.provice_code = arr[0]
      this.Member.city_code = arr[1]
      this.Member.region_code = arr[2]
    },
  },
  created() {
    let options = {fullscreen: true}
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        this.handleInit();
        if (drawId.length > 0) {
          this.initFlg = false;
          this.member_id = drawId;
          this.handleLoad(drawId);
        } else {
          this.initFlg = true;
        }
      }
    }
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
}

.fstRow {
  margin-top: 0px;
  display: flex;
  padding: 5px 5px 5px 5px;
}

.card-top-container {
  display: block;
  padding: 5px;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#container > div {
  margin: 5px;
  width: 400px; /*宽度根据实际情况调节，应与上面一致*/
  overflow: auto; /*防止内容溢出导致布局错位*/
}
</style>